<template>
  <div class="main-part">
    <div class="attribute">
        <div class="title"><div class="interval"></div>商品属性</div>
        <div class="list">
            <div class="part part-width" v-for="item in attribute_list">
             <span class="left overOne">{{ item.title }}</span>
             <span class="right overOne">{{ item.value }}</span>
            </div>
            <div class="part-width" v-for="index of surplusDiv(attribute_list.length,3)">  </div>
        </div>
    </div>
    <div class="attribute" >
        <div class="title"><div class="interval"></div>商品属性</div>
        <div class="rich-text" v-html="richText"></div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl, surplusDiv } from "@/utils/util";
const attribute_list = ref<Array<{
    title:string;
    value:string;
}>>([
   {title:`货源类别`,value:`现货`},
   {title:`品牌`,value:`佐马仕`},
   {title:`货号`,value:`G2806`},
   {title:`面料名称`,value:`涤纶`},
   {title:`风格`,value:`简约`},
   {title:`淘货类别`,value:`时尚都市(24-35岁)`},
   {title:`款式`,value:`开衫`},
   {title:`版型`,value:`合体型`},
   {title:`领型`,value:`方领`},
   {title:`图案`,value:`纯色`},
   {title:`厚薄`,value:`普通`},
   {title:`是否库存`,value:`是`},
   {title:`库存类型`,value:`整单`},
   {title:`款式细节`,value:`口袋装饰`},
]);

const richText = ref<string>("<img style='width:100%' src='"+publicUrl(`/images/attr.jpg`)+"' />");
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
